<template>
  <div class="home">
    <!-- 导航栏 -->
    <div class="header w">
      <div class="logo">
        <img src="../assets/biaozhi.png" alt="" />
      </div>
      <div class="nav">
        <ul>
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="#">免费课程</router-link></li>
          <li><router-link to="#">项目实战</router-link></li>
          <li><router-link to="#">职业规划</router-link></li>
        </ul>
      </div>
      <div class="search">
        <input type="text" value="记得快忘得慢" />
        <button>搜索</button>
      </div>
      <div class="user">
        <router-link to="#">会员中心</router-link> |
        <router-link to="#">我的学习</router-link> |
        <router-link to="#">登录/注册</router-link>
      </div>
    </div>
    <div class="main">
      <div class="main-header">
        <p>课程详情</p>
      </div>
      <div class="main-bodyone">
        <div class="main-bodyone-left">
          <div class="video">
            <video
              controls
              poster="https://edu-image.nosdn.127.net/d4b8d401fac14024add8e58717b74496.png?imageView&quality=100&crop=0_0_439_247&thumbnail=450y250"
            >
              <source src="../assets/python.mp4" type="video/mp4" />
            </video>
          </div>
        </div>
        <div class="main-bodyone-right">
          <div class="content">
            <p class="p1">Python零基础入门动画课【全集】</p>
            <p class="p2">讲师：大熊课堂 Andy数据分析Web爬虫PHP</p>
            <p class="p3">￥398.00</p>
            <p class="p4">精选好课,立减5元,VIP折上9折</p>
            <p class="p5">
              <router-link style="color: #fff" to="#">立即报名</router-link>
            </p>
          </div>
        </div>
      </div>
      <div class="main-bodytwo">
        <div class="main-bodytwo-left">
          <p class="title1">适用人群</p>
          <p class="text">
            应届/在校学生：增强求职竞争力
            <br />
            数据分析人员：提升效率不加班
            <br />
            运营/市场/财务：工作重复，需编程解放自己
          </p>
          <p class="title1">课程概述</p>
          <p class="text">
            【云课堂首推-用动画学Python】《Python零基础入门动画课【500+集】》5大就业方向案例持续更新优化，包括更新大量练习和实例
            <br />
            --课程概述（手把手教你学Python）--
            <br />
            1.本套课程大约500-600节（1080P超清），包含Python基础知识、Python进阶知识、Python框架和5大Python项目（查看本套课程具体知识点，请点击目录选项卡）。
            <br />
            2.持续更新大量练习题和实例 3.本套课程永久有效，一次购买无二次收费
            <br />
            4.课程中遇到问题，购课后，可加大熊PythonVIPQQ群：629543173，老师答疑。
            <br />
            --课程特色-- 1、知识点超全，讲解细致
            <br />
            2、精心设计动画，引用大量比喻帮助初学者理解编程专有名词
            <br />
            3、中文字幕，学python和看电影一样爽
            <br />
            4、碎片化知识，方便大家回顾查阅，温故而知新，吸收率更高，针对性更好
            <br />
            5、视频精心剪辑，无废话，全脱水干货
            <br />
            6、基础知识学+实例学+课后作业+5大项目：【爬虫+excel】+【机器学习】+【Web网站】+【游戏】+【数据分析】
          </p>
          <img
            src="https://edu-image.nosdn.127.net/158166d58c7a4486923322c5a1ae2789.jpg?imageView&quality=100&type=webp"
            alt=""
          />
        </div>
        <div class="main-bodytwo-right">
          <div class="headerimage">
            <img
              src="https://edu-image.nosdn.127.net/6c3e549d74b34739be09a0a951937c21.png?imageView&quality=100&thumbnail=75y75"
              alt=""
            />
          </div>
          <div class="main-bodytwo-right-text">
            大熊之道：道之至简是高效，真传一句话，假传万卷书，我们愿意毫无保留的分享自己的经验和知识。道之不变是初心，我们有一颗永远充满热情的做课初心，反复打磨，持续更新。愿与诸君在智能时代中磨炼技能，终身学习！
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="w">
        <div class="title">
          <ul>
            <li><router-link to="#">关于我们</router-link></li>
            <li><router-link to="#">联系我们</router-link></li>
            <li><router-link to="#">帮助中心</router-link></li>
            <li><router-link to="#">客户服务</router-link></li>
            <li><router-link to="#">新手指南</router-link></li>
            <li><router-link to="#">合作机构</router-link></li>
            <li><router-link to="#">合作导师</router-link></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  setup() {},
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.w {
  width: 1200px;
  margin: auto;
}
.header {
  height: 42px;
  /* 上下30 */
  margin: 30px auto;
}
/* 去除li样式 */
li {
  list-style: none;
}
/* 去除所有a链接下划线 */
a {
  text-decoration: none;
  color: #050505;
}
.logo {
  float: left;
  width: 198px;
  height: 42px;
}
.logo img {
  width: 198px;
  height: 42px;
}
.nav {
  float: left;
  margin-left: 10px;
}
.nav ul li {
  float: left;
}
.nav ul li a {
  display: block;
  height: 42px;
  /* 上下给0 左右给10 */
  padding: 0 10px;
  /* 垂直居中 */
  line-height: 42px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #050505;
}
/* 鼠标划过 下划线 */
.nav ul li a:hover {
  border-bottom: 2px solid rgb(255, 63, 41);
  color: rgb(255, 63, 41);
}
.search {
  float: left;
  width: 412px;
  height: 42px;
  margin-left: 15px;
}
.search input {
  float: left;
  width: 320px;
  height: 40px;
  border: 1px solid rgb(255, 63, 41);
  /* 将边框右设为0 */
  border-right: 0;
  color: #bfbfbf;
  font-size: 14px;
  padding-left: 15px;
  border-radius: 5px 0 0 5px;
  /* 去除被点击时的黑框 */
  outline: none;
}
.search button {
  float: left;
  width: 70px;
  height: 42px;
  background-color: rgb(255, 63, 41);
  border: 0;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
}
.user a {
  line-height: 42px;
  color: #050505;
}
.user a:hover {
  color: rgb(255, 63, 41);
}
/* 导航部分结束 */
/* 中间部分开始 */
.main {
  height: 3600px;
  background-color: rgb(238, 238, 238);
}
.main-header {
  width: 1200px;
  margin: 0 auto;
  height: 60px;
  /* background-color: red; */
}
.main-header p {
  text-align: left;
  line-height: 60px;
  font-size: 17px;
  color: #666666;
}
.main-bodyone {
  width: 1200px;
  height: 300px;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}
.main-bodyone-left {
  float: left;
  width: 450px;
  height: 250px;
  /* background-color: violet; */
}
.main-bodyone-left .video {
  width: 450px;
  height: 250px;
}
.main-bodyone-left video {
  width: 100%;
  height: 100%;
  /* 使得视频充满父元素 */
  object-fit: fill;
  /* background-color: purple; */
  margin-top: 25px;
  margin-left: 20px;
  border-radius: 4px;
}
.main-bodyone-right {
  width: 650px;
  height: 250px;
  float: right;
  /* background-color: yellow; */
}
.content {
  float: right;
  width: 650px;
  height: 250px;
  margin-top: 25px;
  margin-right: 60px;
  /* background-color: tomato; */
}
.content p {
  text-align: left;
  padding: 10px;
}
.content .p1 {
  font-size: 22px;
}
.content .p2 {
  font-size: 14px;
}
.content .p3 {
  font-size: 28px;
}
.content .p4 {
  width: 216px;
  height: 16px;
  line-height: 16px;
  background-color: rgb(255, 99, 42);
  font-size: 16px;
  color: #fff;
  border-radius: 20px;
}
.content .p5 {
  width: 160px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 20px;
  background-color: rgb(255, 128, 0);
  font-size: 20px;
}
/* two开始 */
.main-bodytwo {
  width: 1200px;
  height: 3100px;
  margin: 0 auto;
  margin-top: 25px;
  /* background-color: pink; */
}
.main-bodytwo-left {
  float: left;
  width: 920px;
  height: 3100px;
  background-color: #fff;
}
.main-bodytwo-left p {
  text-align: left;
  margin: 15px 0 15px 20px;
}
.main-bodytwo-left .title1 {
  font-size: 20px;
}
.main-bodytwo-right {
  float: right;
  width: 260px;
  height: 300px;
  background-color: #fff;
}
.main-bodytwo-right .headerimage {
  width: 260px;
  height: 150px;
  border-bottom: 1px solid rgb(238, 238, 238);
}
.headerimage img {
  margin-top: 50px;
}
.main-bodytwo-right-text {
  font-size: 13px;
  color: #666666;
  padding: 15px 20px;
  letter-spacing: 1px;
  text-align: left;
}
/* 中间结束 */
/* 底部 */
.footer {
  height: 178px;
  background-color: rgb(71, 68, 67);
}
.footer ul li {
  float: left;
}
.footer ul li a {
  color: #fff;
  padding: 20px;
}
.footer .title {
  width: 800px;
  height: 30px;
  /* background-color: red; */
  padding-top: 30px;
}
.footer .title a:hover {
  border-bottom: 2px solid #fff;
}
</style>